<template>
  <div class="searchBox">
    <el-input v-model="input2" class="w-50 m-2" placeholder="请输入用户名,姓名" />
    <el-button type="primary" :icon="Search" @click="serch">搜索</el-button>
  </div>
  <el-table :data="UserList" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }" stripe border v-model="isShow">
    <el-table-column prop="id" type="selection" width="55" fixed="left" />
    <el-table-column prop="id" label="编号" width="80" fixed="left" />
    <el-table-column prop="headImg" label="头像" width="100" fixed="left">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.headImg" :zoom-rate="1.2"
          :preview-src-list="scope.row.headImg" :initial-index="4" fit="cover" />
      </template>
    </el-table-column>
    <el-table-column prop="nickName" label="昵称" />
    <el-table-column prop="username" label="用户名" />
    <el-table-column prop="departmentName" label="部门" />
    <el-table-column prop="roleName" label="角色" width="150" />
    <el-table-column prop="status" label="状态" width="100">
      <template #default="scoped">
        <el-switch v-model="scoped.row.status" class="ml-2"
          style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" />
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="日期" width="100" />
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

        <el-popconfirm title="您确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
          @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button size="small" type="danger">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 搜索 -->
  
  <!-- 搜索 -->
  <UserDrawer ref="drawer" :row="oRow"></UserDrawer>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, reactive } from "vue";
import { GetUserList } from "@/api";
import { IUserList } from "@/types";
import UserDrawer from "./components/UserDrawer.vue";

let isShow = ref(false)

let UserList = ref<IUserList[]>([]);
let drawer = ref(null);
let oRow = ref(null);

let input2: any = ref(null)

let searchList = ref<IUserList[]>([]);


onBeforeMount(async () => {
  let {
    data: {
      code,
      data: { list, pagination },
    },
  } = await GetUserList();
  UserList.value = list;
  console.log(list);
  console.log(pagination);
  console.log(code);
});

//编辑
const handleEdit = (index: number, row: any) => {
  console.log(index, row);

  console.log(drawer);
  oRow.value = { ...row };
  drawer.value.visible = true;
};
const handleDelete = (index: number, row: any) => {
  console.log(index, row);
};

const serch = () => {
  console.log(input2.value);
  UserList.value.forEach((item, index) => {
    if (input2.value == item.name || input2.value == item.username) {
      console.log(item);
      searchList.value = item
    }
  })

}
</script>
<style lang="less">
.searchBox {
  display: flex;

  .el-input__wrapper {
    width: 80%;
  }
}
</style>